<template>
  <div class="file-viewer-page">
    <!-- 返回按钮 -->
    <div class="back-button">
      <el-button type="primary" link @click="handleBack">
        <el-icon><ArrowLeft /></el-icon>
        返回上一页
      </el-button>
    </div>

    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="file-title">{{ fileTitle }}</h1>
      <div class="file-meta">
        <span class="file-type">文件类型: {{ fileTypeText }}</span>
        <span class="file-size">{{ fileSize }}</span>
      </div>
    </div>

    <!-- PDF查看器 - 使用iframe -->
    <div v-if="fileType === 'pdf'" class="pdf-viewer-container">
      <div class="viewer-controls">
        <el-button-group>
          <el-button size="small" @click="downloadFile">
            <el-icon><Download /></el-icon> 下载PDF
          </el-button>
          <el-button size="small" @click="openInNewTab">
            <el-icon><View /></el-icon> 在新标签页打开
          </el-button>
        </el-button-group>
      </div>

      <div class="pdf-iframe-container">
        <iframe
            :src="pdfViewerUrl"
            width="100%"
            height="600"
            frameborder="0"
            class="pdf-iframe"
            @load="handlePdfLoad"
        ></iframe>

        <div v-if="loading" class="loading-overlay">
          <el-icon class="loading-icon"><Loading /></el-icon>
          <span>PDF加载中...</span>
        </div>
      </div>
    </div>

    <!-- 不支持的文件类型 -->
    <div v-else class="unsupported-type">
      <el-result
          icon="warning"
          title="不支持的文件类型"
          :sub-title="`无法预览 ${fileType} 格式的文件`"
      >
        <template #extra>
          <el-button type="primary" @click="downloadFile">
            <el-icon><Download /></el-icon> 下载文件
          </el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft,
  Download,
  View,
  Loading
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const loading = ref(true)

// 文件信息
const fileType = ref('pdf')
const fileTitle = ref('测试PDF文档')
const fileTypeText = ref('PDF文档')
const fileSize = ref('1.2MB')
const fileUrl = ref('/pdfjs/test.pdf')

// 计算PDF查看器URL
const pdfViewerUrl = computed(() => {
  // 使用浏览器内置PDF查看功能
  return fileUrl.value
})

// 返回上一页
const handleBack = () => {
  router.back()
}

// 下载文件
const downloadFile = () => {
  const link = document.createElement('a')
  link.href = fileUrl.value
  link.download = fileTitle.value
  link.click()
}

// 在新标签页打开
const openInNewTab = () => {
  window.open(fileUrl.value, '_blank')
}

// PDF加载完成处理
const handlePdfLoad = () => {
  loading.value = false
  ElMessage.success('PDF加载成功')
}

// 初始化
onMounted(() => {
  // 从路由参数获取文件信息
  const { type, title } = route.query
  if (type) fileType.value = type
  if (title) fileTitle.value = title

  // 设置加载超时处理
  setTimeout(() => {
    if (loading.value) {
      loading.value = false
      ElMessage.warning('PDF加载时间过长，请检查文件路径')
    }
  }, 5000)
})
</script>

<style scoped>
.file-viewer-page {
  //max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.back-button {
  margin-bottom: 20px;
}

.page-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2d3d;
  margin-bottom: 8px;
}

.file-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #606266;
}

/* PDF查看器样式 */
.pdf-viewer-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.viewer-controls {
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 6px;
}

.pdf-iframe-container {
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  min-height: 600px;
}

.pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  min-height: 600px;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  color: #409eff;
}

.loading-icon {
  font-size: 32px;
  margin-bottom: 10px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.unsupported-type {
  background: white;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .file-viewer-page {
    padding: 16px;
  }

  .pdf-iframe-container {
    min-height: 400px;
  }
}
</style>
